<!--高顺-->

<!DOCTYPE html>
<!-- suppress ThymeleafVariablesResolveInspection -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" contect="http://www.webqin.net">
    <title>忘记密码</title>


    <link type="text/css" href="/static/css/gs/wangji.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" href="/static/css/bootstrap.min.css">
    <script th:src="@{/static/js/jquery-1.8.3.js}" src="/static/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="/static/js/gs/layui-v2.5.5/layui/css/layui.css"
          th:href="@{/static/js/gs/layui-v2.5.5/layui/css/layui.css}">
    <script th:src="@{/static/js/jquery/jquery.min.js}" src="/static/js/jquery/jquery.min.js"
            type="text/javascript"></script>
    <link th:href="@{/static/layui/css/layui.css}" href="/static/layui/css/layui.css" rel="stylesheet" media="all">
    <script th:src="@{/static/layui/layui.js}" src="/static/layui/layui.js" type="text/javascript"></script>
</head>

<style>
    #tijiao {
        margin-top: 150px;
    }

    img {
        max-width: 230px;
        height: 200px;
    }
</style>
<body>

<div class="content">
    <div class="web-width">
        <div class="for-liucheng">
            <div class="liulist for-cur"></div>
            <div class="liulist for-cur"></div>
            <div class="liulist"></div>
            <div class="liulist"></div>
            <div class="liutextbox">
                <div class="liutext for-cur"><em>1</em><br><strong>填写基本信息</strong></div>
                <div class="liutext for-cur"><em>2</em><br><strong>上传资质证明</strong></div>
                <div class="liutext for-cur"><em>3</em><br><strong>审核结果</strong></div>
            </div>

        </div><!--for-liucheng/-->

        <h2 class="successs">教师资格证:</h2>
        <form th:action="@{/apply/fileUpload}" method="post" class="forget-pwd" enctype="multipart/form-data">
            <div class="successs">
                <dl>
                    <dd>
                        <input type="file" name="fileName" id="fileName" accept="image/png, image/jpeg, image/jpg"
                               onchange="xmTanUploadImg(this)"   onclick="aa()">
                    </dd>
                    <img width="80px" height="50px" id="xmTanImg"/><br/>
                </dl>
                <div class="subtijiao"><input type="submit" value="提交" id="tijiao"></div>
            </div>
        </form>
    </div>
</div><!--web-width/-->
<!--content/-->

<script>
    $("#tijiao").click(function(){

        if($("input[type='file']").val()==""){
            alert("请选择文件后提交");
            return false;
        }else{
            return true;
        }
    })
</script>

<script>
    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        //file.size 单位为byte  可以做上传大小控制
        console.log("file.size = " + file.size);
        var reader = new FileReader();
        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById("xmTanImg");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }
        reader.readAsDataURL(file)
    }
</script>
<style>
    img {
        width: 400px;
    }
</style>
</body>
</html>
